<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - materials - channels</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background:#000;
				color:#fff;
				padding:0;
				margin:0;
				font-weight: bold;
				overflow:hidden;
			}

			a {	color: #ffffff;	}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				color: #ffffff;
				padding: 5px;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
			}

			#vt { display:none }
			#vt, #vt a { color:orange; }
		</style>
	</head>

	<body>
      <script src="javascript/three.js"></script>
      <script src="javascript/OrbitControls.js"></script>
      <script src="javascript/OBJLoader.js"></script>
      <script src="javascript/Detector.js"></script>
      <script src="javascript/stats.min.js"></script>
      <script src='javascript/dat.gui.min.js'></script>
	  	<script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
        var stats;
        var camera, scene, renderer, controls;
        var params = {
          material: 'normal',
          camera: 'perspective',
          side: 'double'
        };
        var cameraOrtho, cameraPerspective;
        var controlsOrtho, controlsPerspective;
        var mesh;
        var pointLight, ambientLight;

        var height = 500; // of camera frustum
        var SCALE = 2.436143; // from original model
        var BIAS = - 0.428408; // from original model

        init();
        animate();

        function init() {

          var container = document.createElement( 'div' );
          document.body.appendChild( container );

          renderer = new THREE.WebGLRenderer();
          renderer.setPixelRatio( window.devicePixelRatio );
          renderer.setSize( window.innerWidth, window.innerHeight );
          container.appendChild( renderer.domElement );

          scene = new THREE.Scene();

          var aspect = window.innerWidth / window.innerHeight;
          cameraPerspective = new THREE.PerspectiveCamera( 45, aspect, 1000, 2500 );
          cameraPerspective.position.z = 1500;
          scene.add( cameraPerspective );

          cameraOrtho = new THREE.OrthographicCamera( - height * aspect, height * aspect, height, - height, 1000, 2500 );
          cameraOrtho.position.z = 1500;
          scene.add( cameraOrtho );

          camera = cameraPerspective;

          controlsPerspective = new THREE.OrbitControls( cameraPerspective, renderer.domElement );
          controlsPerspective.minDistance = 1000;
          controlsPerspective.maxDistance = 2500;
          controlsPerspective.enablePan = false;
          controlsPerspective.enableDamping = true;

          controlsOrtho = new THREE.OrbitControls( cameraOrtho, renderer.domElement );
          controlsOrtho.minZoom = 0.5;
          controlsOrtho.maxZoom = 2;
          controlsOrtho.enablePan = false;
          controlsOrtho.enableDamping = true;

          // lights
          var ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
          scene.add( ambientLight );

          // textures
          var textureLoader = new THREE.TextureLoader();
          var normalMap = textureLoader.load( "images/obj/ninja/normal.jpg" );
          var aoMap = textureLoader.load( "images/obj/ninja/ao.jpg" );
          var displacementMap = textureLoader.load( "images/obj/ninja/displacement.jpg" );

          // material
          materialNormal = new THREE.MeshNormalMaterial( {
            displacementMap: displacementMap,
            displacementScale: SCALE,
            displacementBias: BIAS,
            normalMap: normalMap,
            normalScale: new THREE.Vector2( 1, - 1 ),
            side: THREE.DoubleSide
          } );

          var loader = new THREE.OBJLoader();
          loader.load( "images/obj/ninja/ninjaHead_Low.obj", function ( group ) {
            geometry = group.children[ 0 ].geometry;
            geometry.attributes.uv2 = geometry.attributes.uv;
            geometry.center();
            mesh = new THREE.Mesh( geometry, materialNormal );
            mesh.scale.multiplyScalar( 25 );
            scene.add( mesh );
          } );

          stats = new Stats();
          container.appendChild( stats.dom );
          //window.addEventListener( 'resize', onWindowResize, false );
        }
        
        function animate() {
          requestAnimationFrame( animate );
          controlsOrtho.update();
          controlsPerspective.update();
          stats.begin();
          render();
          stats.end();
        }

        function render() {
          renderer.render( scene, camera );
        }

		</script>

	</body>

</html>
